<template>
  <ATable class="table-pro-container" size="middle" v-bind="$attrs" :pagination="pagination">
    <template #bodyCell="{ column, record, index }">
      <template v-if="column.key === 'index'">
        {{ index + 1 }}
      </template>
      <template v-else-if="column.key === 'action'">
        <slot name="bodyActionCell" :record="record"></slot>
      </template>
      <template v-else>
        <slot name="bodyCell" :column="column" :record="record" :index="index"></slot>
      </template>
    </template>
  </ATable>
</template>

<script setup>
import { computed } from 'vue';

defineOptions({
  inheritAttrs: false
});

const pageConfig = {
  size: 'middle',
  showSizeChanger: true,
  pageSizeOptions: ['10', '20', '50', '100']
};

const props = defineProps({
  pagination: [Boolean, Object]
});

const pagination = computed(() => {
  return props.pagination === false ? false : { ...pageConfig, ...props.pagination };
});
</script>

<style lang="scss" scoped>
.table-pro-container {
  width: 100%;
  height: 100%;

  :deep(.ant-spin-nested-loading) {
    width: 100%;
    height: 100%;

    .ant-spin-container {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
  }
}

.table-pro-container {
  :deep(.ant-table) {
    width: 100%;
    flex-grow: 1;
    overflow: hidden;
    border-radius: 0;

    .ant-table-container {
      width: 100%;
      height: 100%;
      border-start-start-radius: 0;
      border-start-end-radius: 0;

      .ant-table-content {
        width: 100%;
        height: 100%;
        overflow: auto;
        position: relative;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);

        // 滚动条样式
        &::-webkit-scrollbar {
          width: 6px;
          background-color: var(--layout-bg-color);
          border-radius: 3px;
        }

        &::-webkit-scrollbar-thumb {
          background-color: #c1c1c1;
          border-radius: 3px;
        }

        &::-webkit-scrollbar-track {
          background-color: transparent;
        }

        &::-webkit-scrollbar-corner {
          background-color: transparent;
        }

        .ant-table-thead {
          top: 0;
          z-index: 1;
          position: sticky;
        }
      }
    }

    .ant-table-content .ant-table-thead .ant-table-cell {
      padding: 8px 12px;

      &:first-child {
        border-start-start-radius: 0;
      }

      &:last-child {
        border-start-end-radius: 0;
      }
    }

    .ant-table-content .ant-table-tbody .ant-table-cell {
      padding: 8px 12px;
    }
  }
}
</style>
